<template>
  <view class="content">
    <view class="top">
      <view class="top-data" @click="handleSelectDate">
        <text>{{ toDate }}</text>
        <u-icon name="arrow-down-fill" size="16"></u-icon>
      </view>
      <view class="pay">
        <text>支出:</text>
        <text>￥{{ totalCost }}</text>
      </view>
    </view>

    <view class="cart-info" v-if="hasData">
      <view>
        <u-swipe-action
          :show="item.show"
          @click="click"
          @open="open"
          :index="index"
          btn-width="100"
          :options="options"
          v-for="(item, index) in list"
          :key="item.id"
        >
          <view class="item u-border-bottom" @click="payDetail(item.carNum)">
            <view class="title-wrap">
              <text class="title u-line-2">{{ item.parkingName }}</text>
              <text>{{ item.statusDesc }}</text>
            </view>
            <text>{{ item.carNum }}</text>
            <view class="content-warp">
              <text>{{ item.leaveTime }}</text>
              <view class="amount">
                ￥<text>{{ item.actualCost }}</text>
              </view>
            </view>
          </view>
        </u-swipe-action>
      </view>
    </view>
    <u-empty margin-top="300" text="缴费记录为空" mode="list" v-else></u-empty>
    <u-picker
      @confirm="confirm"
      mode="time"
      v-model="showDate"
      :params="params"
    ></u-picker>
    <u-toast ref="uToast" />
    <u-modal
      v-model="showModal"
      :content="'确认是否删除'"
      @confirm="confirmModal"
      show-cancel-button
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      carNum: "",
      show: false,
      disabled: false,
      showDate: false,
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      loading: {
        status: "",
      },
      lastItemTime: "",
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
            height: "230rpx",
            background: "#FE6000",
            borderRadius: "16rpx",
            marginLeft: "16rpx",
            fontSize: "28rpx",
          },
        },
      ],
      toDate: "",
      totalCost: "",
      searchStartDate: "",
      showModal: false,
      listIndex:''
    };
  },
  computed: {
    hasData() {
      return this.list.length > 0;
    },
  },
  onPullDownRefresh() {
    this.lastItemTime = "";
    this.PostCollectList(); //获取数据
  },
  //上拉加载触发方法
  onReachBottom() {
    if (this.hasNextPage) {
      //判断是否还有数据需要加载
      //   this.params.pageNum = this.params.pageNum + 1;
      this.loading.status = "loadingText";
      this.PostCollectList(); //获取数据
    } else {
      this.loading.status = "nomoreText";
    }
  },
  onLoad(option) {
    if (option) {
      this.carNum = option.carNum;
    }
    this.toDate = this.$u.timeFormat(new Date(), "yyyy年mm月");
    this.searchStartDate = this.$u.timeFormat(new Date(), "yyyy-mm");
    this.PostCollectList();
  },
  methods: {
    //调整缴费详情页面
    payDetail(carNo) {
      uni.navigateTo({
        url: "../payDetail/index?carNo=" + carNo,
      });
    },
    confirmModal() {
      let openid = uni.getStorageSync("userInfo").openid;
      this.$Api
        .deleteLog({
          openid,
          orderId: this.list[this.listIndex].id,
        })
        .then((res) => {
          this.$refs.uToast.show({
            title: "删除成功",
            type: "success",
          });
          console.log(this.carNum);
          this.lastItemTime = "";
          this.PostCollectList(); //获取数据
        });
    },
    click(index, index1) {
      if (index1 == 0) {
        this.listIndex=index
        this.showModal = true;
      } else {
        this.list[index].show = false;
      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      console.log(index);
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
    handleSelectDate() {
      this.showDate = true;
    },
    PostCollectList() {
      let openid = uni.getStorageSync("userInfo").openid;
      this.$Api
        .getHistoryOrderList({
          openid,
          carNum: this.carNum,
          searchStartDate: this.searchStartDate,
          lastItemTime: this.lastItemTime,
        })
        .then((res) => {
          let data = res.data.orderList
            ? res.data.orderList.map((e) => ({
                ...e,
                show: false,
              }))
            : [];
          this.list = this.lastItemTime ? this.list.concat(data) : data;
          this.totalCost = res.data.totalCost;
          uni.stopPullDownRefresh();
          this.hasNextPage = res.data.orderList.length === 0;
          if (res.data.orderList.length > 0)
            this.lastItemTime =
              res.data.orderList[res.data.orderList.length - 1].createTime;
          if (this.hasNextPage) {
            this.loading.status = "loadmoreText";
          } else {
            this.loading.status = "nomoreText";
          }
        });
    },
    confirm(date) {
      this.toDate = `${date.year}年${date.month}月`;
      this.searchStartDate = `${date.year}-${date.month}`;
      this.lastItemTime = "";
      this.PostCollectList();
    },
  },
};
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
